<ix-modal-header
  [requiredRoles]="requiredRoles"
  [title]="title | translate"
  [loading]="isLoading()"
></ix-modal-header>

<mat-card>
  <mat-card-content>
    <form class="ix-form-container" [formGroup]="form" (submit)="onSubmit()">
      <ix-fieldset [title]="'Basic Info' | translate">
        <ix-input
          formControlName="comment"
          [label]="labels.comment | translate"
        ></ix-input>
      </ix-fieldset>

      <ix-fieldset [title]="'IP Address' | translate">
        <ix-list
          formArrayName="ip"
          [formArray]="form.get('ip')"
          [empty]="listen.length === 0"
          [label]="'Add listen' | translate"
          [required]="true"
          (add)="onAdd()"
        >
          @for (item of listen; track item; let i = $index) {
            <ix-list-item
              [label]="'IP Address' | translate"
              (delete)="onDelete(i)"
            >
              <ix-select
                [formControlName]="i"
                [label]="labels.ip | translate"
                [tooltip]="tooltips.ip | translate"
                [options]="listenOptions$"
                [required]="true"
              ></ix-select>
            </ix-list-item>
          }
        </ix-list>
      </ix-fieldset>

      <ix-form-actions>
        <button
          *ixRequiresRoles="requiredRoles"
          mat-button
          type="submit"
          color="primary"
          ixTest="save"
          [disabled]="form.invalid || isLoading()"
        >
          {{ 'Save' | translate }}
        </button>
      </ix-form-actions>
    </form>
  </mat-card-content>
</mat-card>
